<template>
  <div>
    <!-- <router-view></router-view>
    我是我的名片 -->
    <!-- <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="图片类型">
          <el-button type="primary" @click="addimg">编辑新闻</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="table" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="250" />
        <el-table-column prop="title" label="标题" align="center" width="250" />
        <el-table-column prop="name" label="学院" align="center" width="300" />
        <el-table-column prop="writer" label="作者" align="center" width="180" />
        <el-table-column prop="phone" label="联系" align="center" width="180" />
        <el-table-column prop="date" label="日期" align="center" width="200" />
        <el-table-column label="按钮" align="center"  width="120" >
          <template #default="{ row,$index }">
          <div class="ufhe">
            <el-button type="danger" style="text-align: center" @click="del(row.id,$index)">删除</el-button>
          </div>
          </template>
        </el-table-column>
        <el-table-column label="查看" align="center" width="180" >
          <template #default="{ row }">
          <div class="ufhe">
            <el-button type="success" style="text-align: center" @click="search(row.id)">查看</el-button>
          </div>
        </template>
        </el-table-column> -->
        <!-- <el-table-column prop="address" label="Address" /> -->
      <!-- </el-table> -->
      <!-- <div v-for="(i, index) in num" :key="index">
        <div v-show="i.type == 1">
          <textarea
            rows="16"
            cols="86"
            style="resize: none"
            placeholder="请输入文本"
            v-model="i.content"
          />
        </div>
        <div v-show="i.type == 2">
          <img :src="i.src" alt="" width="625" height="300" />
          <input type="file" name="file" :id="index" @change="change" />
        </div>
      </div> -->
      <!-- <form action="" v-for="(i, index) in imgnum.length" :key="index">
        <img :src="i.src" alt="" />
        <input type="file" name="file">
      </form> -->
      <!-- <div v-for="(i, index) in imgnum.length" :key="index">
        <img :src="i.src" alt="" />
        <input type="file">
      </div> -->
    </div> 
  <!--</div> -->
</template>
<script lang="js" setup>
import { ref,onMounted } from "vue"
import {getimg,listnews,delnews} from '../../../api/user'
import { useRouter } from 'vue-router'

onMounted(async () => {
  const res = await listnews()
  table.value = res.data
})
const del = async (e,b) => {
  console.log(e)
  console.log(b)
  console.log(typeof(e))
  await delnews(e)
  table.value.splice(b,1)
}
const table = ref([])
const save = async () => {
  const formdata = new FormData()
  const response = await fetch(num.value[1].src)
  const blob = await response.blob()
  formdata.append('file',blob)
  console.log(formdata.value);
  if (formdata.has('file')) {  
    console.log('FormData 对象中包含键 "file"');  
} else {  
    console.log('FormData 对象中不包含键 "file"');  
}  
  const aaa = await getimg(formdata)
  console.log(aaa);
}
const change = (e) => {
  const file = e.target.files[0]
  var reader = new FileReader()
  reader.readAsDataURL(file)
  console.log('reader', reader)
  const a = Number(e.target.id)
  //监听文件读取结束后事件
  reader.onloadend =  async function (c) {
    // console.log('sajdlksa', c.target?.result)
    num.value[a].src = c.target.result
    const formdata = new FormData()
    formdata.append('file',c.target.result)
    const aaa = await getimg(formdata)
    console.log(aaa);
    //e.target.result就是最后的路径地址
  }
  console.log(num.value);
}
const num = ref([
  {
    type:1,
    content:'1'
  },
  {
    type:2,
    src:'1'
  }
])
const imgnum = ref([
  {
    src:'1'
  }
])
const addtext = () => {
  num.value.push({type:1,content:''})
}
const router = useRouter()
const addimg = () => {
  router.push('/editor')
}
</script>